<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <!-- v-show:控制元素的显示或者隐藏 -->
    <div id="app">
        <button @click="change">切换</button>
        <!-- 方法一：使用v-if控制元素的显示或者隐藏,本质是在DOM中增加或者删除元素 -->
        <div class="box" id="one" v-if="flag"></div>
        <!-- 方法二：使用v-show控制元素的显示或者隐藏，本质是通过修改元素的行内样式来控制元素 -->
        <div class="box" id="two" v-show="flag"></div>

        <!-- v-if和v-show的区别 -->
        <!-- 1. v-if本质是在DOM中增加或者删除元素控制元素的显示或隐藏;
            如果一开始页面渲染的时候，v-if的条件是false，该元素根本就不会出现在DOM中

            2.v-show本质是通过修改元素的行内样式来控制元素的显示或隐藏；
            如果一开始页面渲染的时候，v-show的条件是false，该元素依然会出现在DOM中，只是display="none"

            3.在开发中，当需要频繁切换显示或者隐藏时，选择v-show;只是一次切换显示或隐藏，选择v-if
            4.首屏渲染，选择v-if
        -->

    </div>
    <script src="./vue.js"></script>
    <script>
        let app=new Vue({
            el:"#app",
            data:{
                flag:false
            },
            methods:{
                change(){
                    this.flag=!this.flag;
                }
            }
        })
    </script>
</body>
</html>